<template>
    <el-row :gutter="16">
        <el-col :span="18">
            <el-card shadow="never">
                <template #header>
                    <div class="flex-v-center justify-content-between">
                        <span>欢迎使用 TNX Admin</span>
                    </div>
                </template>
                <p class="text-secondary">这是基础框架首页，占位内容。</p>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="never">
                <template #header>
                    <div class="flex-v-center justify-content-between">
                        <span>系统信息</span>
                    </div>
                </template>
                <tnxel-detail-form :back="false">
                    <el-form-item label="应用">TNX Admin</el-form-item>
                    <el-form-item label="版本"><span v-if="version">v{{ version }}</span><span v-else class="text-placeholder">-</span></el-form-item>
                    <el-form-item label="API"><span class="url">{{ apiBaseUrl || '-' }}</span></el-form-item>
                </tnxel-detail-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import tnx from '@/tnx.js';

export default {
    data() {
        return {
            version: null,
            apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
        };
    },
    mounted() {
        tnx.app.rpc.get('/version').then(version => {
            this.version = version;
        }).catch(() => {
            // 静默：后端未就绪时不报错
        });
    },
};
</script>

<style scoped>
</style>